<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: LiYansheng
 * @Date: 2022-05-09 23:18:25
 * @LastEditors: CoderXZ
 * @LastEditTime: 2022-05-09 23:21:22
-->
<template>
  <div>
    <el-row>
      <el-col :span="8">
        <el-card>
          <div id="chart3" style="width: 300px; height: 350px"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div id="chart4" style="width: 300px; height: 350px"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div id="chart5" style="width: 400px; height: 350px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import WorldCloud from "@/components/my/WorldCloud";
import { getAnalyzeIntent } from "../../api/analyze.js";
export default {
  data() {
    return {
      cloudData: [],
    };
  },
  components: {
    WorldCloud,
  },
  mounted() {
    var myChart3 = this.$echarts.init(document.getElementById("chart3"));
    var myChart4 = this.$echarts.init(document.getElementById("chart4"));
    var option3 = {
      title: {
        text: "期望薪资",
        left: "center",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: ["5K", "10K", "15K", "20K", "20k+"],
          axisTick: {
            alignWithLabel: true,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "人数",
          type: "bar",
          barWidth: "60%",
          data: [],
        },
      ],
    };
    var option4 = {
      title: {
        text: "意向行业",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        top: "5%",
        left: "center",
      },
      series: [
        {
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 5,
          },
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "40",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [],
        },
      ],
    };
    var chart5 = this.$echarts.init(document.getElementById("chart5"), "macarons");
    var mapOption = {
      backgroundColor: "#FFFFFF",
      title: {
        text: "意向工作城市",
        x: "center",
      },
      tooltip: {
        trigger: "item",
      },

      //左侧小导航图标
      visualMap: {
        show: true,
        x: "left",
        y: "left",
        splitList: [
          { start: 500, end: 600 },
          { start: 400, end: 500 },
          { start: 300, end: 400 },
          { start: 200, end: 300 },
          { start: 100, end: 200 },
          { start: 0, end: 100 },
        ],
        color: ["#5475f5", "#9feaa5", "#85daef", "#74e2ca", "#e6ac53", "#9fb5ea"],
      },

      //配置属性
      series: [
        {
          name: "人数:",
          type: "map",
          mapType: "china",
          roam: true,
          label: {
            normal: {
              show: true, //省份名称
            },
            emphasis: {
              show: false,
            },
          },
          data: [], //数据
        },
      ],
    };
    getAnalyzeIntent()
      .then((result) => {
        if (result.status == "200") {
          option3.series[0].data = result.data.salaryData;
          option4.series[0].data = result.data.industryData;
          mapOption.series[0].data = result.data.cityData;
          chart5.setOption(mapOption);
          myChart3.setOption(option3);
          myChart4.setOption(option4);
        }
      })
      .catch((err) => {});
  },
};
</script>

<style></style>
